import React from 'react'
import { Button, Space } from '@kedacom/react-next'
import MeetingHeader from '@/components/MeetingHeader'
import { StyledWrap } from './style'
import Table from '@/components/Table'
import useInit from '@/hooks/useInit'
import useTemplateService from './service'
import MeetingConveneModal from './MeetingConveneModal'
import WebRecommendBrowser from '@/components/WebRecommendBrowser'
import { t } from 'i18next'

const App = () => {
	useInit()
	const {
		columns,
		data,
		pager,
		selectedRowIds,
		isShowConveneBtn,
		isShowModal,
		templateData,
		setIsShowModal,
		setSelectedRowIds,
		handlePageChange,
		handleConveneMt,
		handleEdit,
		handleDelete,
		handleAdd,
	} = useTemplateService()

	const emptyMsg = (
		<div className="empty-msg">{t('请添加属于个人的会议模板，创建会议时，可导入会议模板里面的参数。')}</div>
	)

	return (
		<>
			<WebRecommendBrowser />
			<MeetingHeader tabIndex={4} />
			<StyledWrap className="template">
				<Space className="btn" space={5}>
					{isShowConveneBtn && (
						<Button
							className="convene_meeting"
							onClick={handleConveneMt}
							disabled={selectedRowIds.length !== 1}
						>
							{t('立即召开')}
						</Button>
					)}
					<Button className="add" onClick={handleAdd}>
						{t('添加')}
					</Button>
					<Button className="edit" onClick={handleEdit} disabled={selectedRowIds.length !== 1}>
						{t('修改')}
					</Button>
					<Button className="delete" onClick={handleDelete} disabled={selectedRowIds.length === 0}>
						{t('删除')}
					</Button>
				</Space>
				<Table
					rowIdField="templateMoid"
					columns={columns}
					tableDataList={data}
					pager={pager}
					/*
					nodata 无数据展示内容
					*/
					nodata={emptyMsg}
					selectedRowIds={selectedRowIds}
					onPageChange={handlePageChange}
					onRowSelectAll={(e, selectedRowData, selectedRowIds: string[], nextSelected) => {
						setSelectedRowIds([...selectedRowIds])
					}}
					onRowClick={(e, rowData, id: string, nextSelected, index) => {
						if (nextSelected) {
							setSelectedRowIds([...selectedRowIds, id])
						} else {
							setSelectedRowIds(selectedRowIds.filter((item) => item !== id))
						}
					}}
					i18n={{ order: t('序号') }}
				/>
				{/* 
				MeetingConveneModal
				点击立即召开按钮出现的弹窗
				*/}
				<MeetingConveneModal data={templateData} open={isShowModal} setOpen={setIsShowModal} />
			</StyledWrap>
		</>
	)
}

export default App
